<!-- <template>
    <article-detail :is-edit="true" />
  </template>
  
  <script>
  import ArticleDetail from './components/ArticleDetail'
  
  export default {
    name: 'EditForm',
    components: { ArticleDetail }
  }
  </script>
   -->
<template>
  <div>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="header_btn_box">
            <router-link :to="{ path: '/articletest/add', query: { type: 'add' } }" style="margin-right: 10px;">
              <el-button type="primary" size="mini" icon="el-icon-edit">
                新增
              </el-button>
            </router-link>
            <el-button :loading="downloadLoading" type="primary" icon="el-icon-download" size="mini"
              @click="handleDownload()">导出</el-button>
            <el-button type="primary" icon="el-icon-delete" size="mini" @click="batchDelNotice()">批量删除</el-button>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="showSearch = !showSearch">高级查询</el-button>
            <!-- <el-button type="primary" icon="el-icon-plus" @click="addDialogOpen()">新增</el-button> -->
          </div>
        </el-col>
      </el-row>
      <!-- <transition name="el-zoom-in-top">
        <el-row :gutter="20" v-show="showSearch">
          <el-col :span="24">
            <div style="width: 100px;" class="fl">
              <el-select v-model="value" placeholder="请选择" @change="statusChange()">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div style="width: 20%;margin:0  10px;min-width: 150px;" class="fl"><el-input v-model="searchinput" placeholder="公告标题"></el-input></div>
            <div style="width: 180px;" class="fl"><el-button type="primary" icon="el-icon-search" @click="searchKey()">查询</el-button>
            <el-button type="primary" @click="reset()">重置</el-button></div>
          </el-col>
        </el-row>
      </transition> -->
      <transition name="el-zoom-in-top">
        <el-form ref="form" :model="form" label-width="80px" v-show="showSearch">
          <el-row>
            <el-col :span="24">
              <el-form-item label="标题">
                <el-input v-model="form.title" placeholder="请输入标题" clearable></el-input>
              </el-form-item>
              <el-form-item label="内容">
                <el-input v-model="form.content" placeholder="请输入内容" clearable></el-input>
              </el-form-item>
              <el-form-item label="作者">
                <el-input v-model="form.author" placeholder="请输入作者" clearable></el-input>
              </el-form-item>
              <el-form-item label="是否开启评论" class="iscomment">
                <el-select v-model="form.is_comment" placeholder="请选择" @change="statusChange()">
                  <el-option v-for="item in options" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="searchGroup">
              <el-button type="primary" @click="searchKey()" size="small">查询</el-button>
              <el-button type="primary" size="small" @click="reset()">重置</el-button>
              <!-- <el-button type="primary" size="small" @click="exportTap">导出</el-button> -->
            </el-col>
          </el-row>
        </el-form>
      </transition>
      <!-- 通知列表区域 -->
      <el-table :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" :data="noticeList"
        border stripe @selection-change="selectionChange" sortable="custom" @sort-change="changeTableSort">
        <!-- el-table发布日期降序 :default-sort ="{prop:'publish_date',order:'descending'}" -->
        <el-table-column fixed="left" type="selection" width="60"></el-table-column>
        <!-- <el-table-column type="index" label="序号" width="60" :index="indexAdd" fixed></el-table-column> -->
        <el-table-column prop="title" label="标题" fixed></el-table-column>
        <el-table-column label="内容">
          <template slot-scope="scope">
            {{ delTag(scope.row.content) }}
          </template>
        </el-table-column>
        <el-table-column prop="articeType" label="文章类型" width="100"></el-table-column>
        <!-- 排序 -->
        <!-- <el-table-column prop="publish_date" label="发布日期" width="120" sortable></el-table-column> -->
        <el-table-column prop="publish_date" label="发布日期" width="120" sortable="custom"></el-table-column>
        <!-- <el-table-column prop="publishRange" label="发布范围" width="120"></el-table-column> -->
        <el-table-column prop="publishRange" label="发布范围" width="100"
          :filters="[{ text: '普发', value: '普发' }, { text: '指定单位', value: '指定单位' },{ text: '指定员工', value: '指定员工' },{ text: '指定单位&指定员工', value: '指定单位&指定员工' }]"
          :filter-method="filterRangeTag"
          filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.publishRange === '普发' ? 'success' : scope.row.publishRange==='指定单位&指定员工'?'warning' : ''"
              disable-transitions>{{scope.row.publishRange}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operate_time" label="操作时间" width="200"></el-table-column>
        
        <!-- <el-table-column prop="is_comment" label="开启评论" width="100"></el-table-column> -->
        <el-table-column prop="is_comment" label="开启评论" width="100"
          :filters="[{ text: '是', value: '是' }, { text: '否', value: '否' }]"
          :filter-method="filterTag"
          filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.is_comment === '是' ? 'success' : 'danger'"
              disable-transitions>{{scope.row.is_comment}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="author" label="作者" width="100"></el-table-column>
        <el-table-column prop="operator" label="修改者" width="100"></el-table-column>
        <el-table-column prop="visitNum" label="阅读数" width="100"></el-table-column>
        <!-- fixed="right" -->
        <el-table-column label="操作" width="200" >
          <template slot-scope="scope">
            <router-link :to="{ path: '/preview', query: { Id: scope.row.id } }" target='_blank' title="预览">
              <el-button type="primary" size="mini" icon="el-icon-view"></el-button>
            </router-link>
            <!-- <router-link :to="'/articletest/edit1/' + scope.row.id"> -->
            <router-link :to="{ path: '/articletest/edit1', query: { Id: scope.row.id, type: 'edit' } }" title="编辑">
              <el-button type="primary" size="mini" icon="el-icon-edit" style="margin-left: 10px;"></el-button>
            </router-link>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="delContent(scope.row.id)"
              style="margin-left: 10px;" title="删除"></el-button>
          </template>

        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination class="user-pagination" :current-page="queryInfo.pagenum" :page-sizes="[10, 30, 50]"
        :page-size="queryInfo.pagesize" :total="queryInfo.total" layout="total,sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>

    <!-- 新增的对话框 -->
    <!-- <el-dialog title="新增" :visible.sync="addDialogVisible" width="35%">
     
      <el-form label-width="70px">
        <el-form-item label="公告内容">
          <el-input v-model="addList.content"></el-input>
        </el-form-item>
        <el-form-item label="发布日期">
          <el-radio v-model="addList.radioPub" label="1">立即发布</el-radio>
          <el-radio v-model="addList.radioPub" label="2">定时发布</el-radio>
          <el-date-picker :disabled="datePickerVisible" class="date-picker" v-model="addList.publish_date" type="date"
            placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptionsAdd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio v-model="addList.radioSta" label="1">是</el-radio>
          <el-radio v-model="addList.radioSta" label="2">否</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addListConfirm()">确 定</el-button>
      </span>
    </el-dialog> -->

    <!-- 编辑的对话框 -->
    <!--<el-dialog title="编辑" :visible.sync="editVisible" width="35%">
       
        <el-form label-width="70px" :model="editForm">
          <el-form-item label="公告标题">
            <el-input
            v-model="editForm.title"
            type="input"
            :rows="3"></el-input>
          </el-form-item>
          <el-form-item label="公告内容">
            <el-input
            v-model="editForm.content"
            type="textarea"
            :rows="3"></el-input>
          </el-form-item>
          <el-form-item label="发布日期">
            <el-date-picker
            v-model="editForm.publish_date"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio v-model="editForm.radioEdit" label="1">是</el-radio>
            <el-radio v-model="editForm.radioEdit" label="2">否</el-radio>
          </el-form-item>
        </el-form>
       
        <span slot="footer" class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" @click="editListConfirm()">确 定</el-button>
        </span>
      </el-dialog>-->

  </div>
</template>
  
<script>
import { getNoticeList, addNoticeList, delNoticeList, AlldelNoticeList, ExportList } from '@/api/newUsertest'

// import {editNoticeList} from '@/api/newUsertest'
// import { fetchArticle } from '@/api/newUsertest'
// 日期格式
Date.prototype.format = function (fmt) {
  var o = {
    "M+": this.getMonth() + 1, //月份
    "d+": this.getDate(), //日
    "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时
    "H+": this.getHours(), //小时
    "m+": this.getMinutes(), //分
    "s+": this.getSeconds(), //秒
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
    "S": this.getMilliseconds() //毫秒
  };
  if (/(y+)/.test(fmt))
    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt))
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  return fmt;
};
export default {

  data () {
    return {
      // 获取公告信息列表对象
      queryInfo: {
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 10,
        // 总页数
        total: 0
      },
      // 查询
      options: [{
        value: '0',
        label: '全部'
      }, {
        value: '1',
        label: '是'
      }, {
        value: '2',
        label: '否'
      }],
      publishRange:[{
        value: '0',
        label: '普发'
      }, {
        value: '1',
        label: '指定单位'
      }, {
        value: '2',
        label: '指定员工'
      }, {
        value: '3',
        label: '指定单位&指定员工'
      } 
      ],
      form: {
        title: "",	// 标题
        content: "",	// 文章内容
        author: "",
        is_comment: "0", //是否开启评论
        publishRange:""
        // createDateStart: "",	// 创建日期
        // createDateEnd: "",
        // showDateStart: "",	// 上线日期
        // showDateEnd: ""
      },
      value: '0',
      order:'2',//默认排序 降序
      showSearch: false,
      searchinput: '',
      // 添加通知对话框
      addDialogVisible: false,
      // 边界操作
      editVisible: false,
      // 通知列表
      noticeList: [],
      isloading: false,
      // 编辑对话框
      editForm: {
        content: '',
        publish_date: '',
        radioEdit: '',
        id: 0,
        operator: ''
      },
      selecteDta: [], //存放勾选的数据
      downloadLoading: false, //导出
      ExportList: [],  //存放要导出的数据
      // 新增对话框
      // addList: {
      //   content: '',
      //   publish_date: '',
      //   radioPub: '1',
      //   radioSta: '1'
      // },
      // 发布时间只能在今天以及今天之后
      pickerOptionsAdd: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
        }
      },
    }
  },
  created () {
    // this.$store.dispatch('getNoticelist')
    this.getNoticeList()
  },
  methods: {
    filterTag(value, row) {
      return row.is_comment === value;
    },
    filterRangeTag(value, row){
      return row.publishRange === value;
    },
    //移除HTML标签
    delTag (str) {
      return str.replace(/<[^>]+>/g, "");
    },

    // 获取列表数据
    getNoticeList () {
      this.form.pagenum=this.queryInfo.pagenum
      this.form.pagesize=this.queryInfo.pagesize
      this.form.order=this.order
      // 合并参数
      let query = this.form
      console.log("shd",query)
      getNoticeList({
        query
        // 'pagenum': this.queryInfo.pagenum,
        // 'pagesize': this.queryInfo.pagesize,
        // 'is_comment': this.value,
        // 'searchKey': this.searchinput
      }).then(response => {
        console.log(response.data)
        this.isloading = true
        this.noticeList = response.data.content
        this.queryInfo.pagenum = response.data.pagenum
        this.queryInfo.pagesize = response.data.pagesize
        this.queryInfo.total = response.data.total
        for (var i = 0; i < response.data.content.length; i++) {
          if (response.data.content[i].is_comment == "1") {
            this.noticeList[i].is_comment = "是"
          } else {
            this.noticeList[i].is_comment = "否"
          }
          if(response.data.content[i].ordinaryPub=="1"){
            this.noticeList[i].publishRange="普发"
          }else if(response.data.content[i].publishRange){
            if(response.data.content[i].publishRange.depts&&response.data.content[i].publishRange.emps){
              this.noticeList[i].publishRange="指定单位&指定员工"
            }
            if(response.data.content[i].publishRange.depts){
              this.noticeList[i].publishRange="指定单位"
            }
            if(response.data.content[i].publishRange.emps){
              this.noticeList[i].publishRange="指定员工"
            }
            
          }
          // for(){

          // }

        }
      })
    },
    // type序号 - 页面切换递增
    indexAdd (index) {
      // console.log(index, 222222)
      const page = this.queryInfo.pagenum // 当前页码
      const pagesize = this.queryInfo.pagesize // 每页条数
      return index + 1 + (page - 1) * pagesize
    },
    // 监听 pagesize 改变的事件
    handleSizeChange (val) {
      this.queryInfo.pagesize = val
      this.getNoticeList()
    
    },
    // 监听 页码值 改变的事件
    handleCurrentChange (val) {
      this.queryInfo.pagenum = val
      this.getNoticeList()
    },
    // 字段排序
    changeTableSort(e){
      if (e.order == 'descending') {
          this.order = 2
        } else if (e.order == 'ascending') {
          this.order = 1
        } 
        this.getNoticeList ();
    },
   
    // 删除公告
    delContent (id) {
      console.log(id)
      this.$confirm('此操作将永久删除该公告, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delNoticeList({
          'id': id
        }).then(response => {
          console.log(response.data)
        })
        this.getNoticeList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    /** 批量删除 */
    batchDelNotice () {
      // console.log(this.multipleSelection, 'multipleSelection')
      if (this.selecteDta.length <= 0) {
        this.$message({
          type: 'warning',
          message: '请至少勾选一条数据',
          showClose: true
        })
        return
      }
      let params = []
      this.selecteDta.forEach(item => {
        params.push(item)
      })
      console.log(this.selecteDta)
      console.log(params)
      this.$confirm('此操作将永久批量删除选择数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("输出123")
        AlldelNoticeList({
          params
        }).then(res => {
          console.log("输出", res)
          if (res.code === 20000) {
            this.$message.success('批量删除成功！')
            this.getNoticeList()
          }
        })
          .catch(err => {
            console.log(err)
          })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })

    },
    // 初始化新增公告对话框
    // addDialogOpen () {
    //   this.addDialogVisible = true
    //   this.addList.content = ''
    //   this.addList.publish_date = ''
    //   this.addList.radioPub = '1'
    //   this.addList.radioSta = '1'
    // },
    // 确认新增数据
    addListConfirm () {
      var is_comment = ''
      var operate_time = new Date().format('yyyy-MM-dd hh:mm:ss')
      if (this.addList.radioSta === '1') {
        is_comment = '是'
      } else {
        is_comment = '否'
      }
      addNoticeList({
        'content': this.addList.content,
        'publish_date': this.addList.publish_date,
        // 'is_comment': is_comment,
        'is_comment': this.addList.radioSta,
        'operate_time': operate_time
      }).then(response => {
        if (response.code != 20000) {
          this.$message.error('添加公告失败！')
        } else {
          this.$message.success('添加公告成功！')
        }
        console.log(response.data)
        this.noticeList = response.data.content.newsList
        this.queryInfo.total = response.data.total
      })
      this.addDialogVisible = false
      this.getNoticeList()
    },
    // 
    selectionChange: function (selections) {
      this.selecteDta = selections.map(row => row.id)
      console.log(this.selecteDta)
    },
    // 查询数据
    statusChange () {
      console.log(this.form.is_comment)
      this.getNoticeList()
    },
    searchKey () {
      console.log(this.form)
      this.getNoticeList()
    },
    // 重置
    reset () {
        // this.value = '0',
        // this.searchinput = "",
      this.form= {
        title: "",	// 标题
        content: "",	// 文章内容
        author: "",
        is_comment: "0", //是否开启评论
        // createDateStart: "",	// 创建日期
        // createDateEnd: "",
        // showDateStart: "",	// 上线日期
        // showDateEnd: ""
      },
      this.getNoticeList()
    },
    // 导出数据
    handleDownload () {
      this.downloadLoading = true
      this.form.pagenum=""
      this.form.pagesize=""
      let params = []
      this.selecteDta.forEach(item => {
        params.push(item)
      })
      this.form.params=params
      // 合并参数
      let query = this.form
      console.log("shd", query);
      // 获取要导出的数据
      ExportList({query}).then(res => {
        console.log(res.data.content)
        this.ExportList = res.data.content
        for (var i = 0; i < res.data.content.length; i++) {
          if (res.data.content[i].is_comment == "1") {
            this.ExportList[i].is_comment = "是"
          } else {
            this.ExportList[i].is_comment = "否"
          }
        }
        import('@/vendor/Export2Excel').then(excel => {
          // const tHeader = {
          // '标题': 'title',
          // '发布日期': 'publish_date',
          // '操作者': 'operator',
          // '操作时间': 'operate_time',
          // }
          const tHeader = ['文章ID','标题', '发布日期', '作者','操作者', '操作时间']
          const filterVal = ['id','title', 'publish_date','author', 'operator', 'operate_time']
          const data = this.formatJson(filterVal)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: '数据导出'
          })
          this.downloadLoading = false
        })
      })


    },
    formatJson (filterVal) {
      console.log("this.ExportList", this.noticeList)
      return this.ExportList.map(v => filterVal.map(j => {
        // if (j === 'timestamp') {
        //   return parseTime(v[j])
        // } else {
        //   return v[j]
        // }
        return v[j]
      }))
    },

  },

  // computed: {
  //   datePickerVisible () {
  //     if (this.addList.radioPub === '1') {
  //       this.addList.publish_date = new Date().format('yyyy-MM-dd')
  //       return true
  //     } else {
  //       return false
  //     }
  //   }
  // }
}
</script>
<style lang="scss">
.fl {
  float: left;
}

.el-table .cell {
  white-space: nowrap !important;
}

.el-table__fixed,
.el-table__fixed-right {
  height: 100% !important;
}
.header_btn_box{
text-align: right;
/* margin-bottom: 10px; */
 .el-button{
  margin-bottom: 10px;
}
}

.iscomment {
  /* width: 22%; */
  margin-left: 30px;

  .el-select {
    width: 100px;
  }

  .el-form-item__label {
    width: 100px !important;
  }
}
.searchGroup {
  text-align: right;
  margin-top: 5px;
  margin-bottom: 5px;
}

</style>
<style lang="scss" scoped>
.el-card {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}
.el-form{
  margin-top: 10px;
}
.el-form-item {
  float: left;
  width: 300px;
}


.el-table {
  margin-top: 20px;
}

.el-pagination {
  overflow-x: auto;
  margin-top: 30px;
}
</style>
  
  